<template>
	<text>
		<text v-if='over' :style="{color: txtColor,'font-size': fontSize+'rpx'}">{{endTxt?endTxt:''}}已结束</text>
		<text v-else :style="{color: txtColor,'font-size': fontSize+'rpx'}" class="mt">
			
		<text class="mdd">{{startTxt?startTxt:''}}</text>
		<text class="mdd" v-if='day && day>0'>{{day}}天</text>
			
			
			<template v-else>
				<text class="mb" :style="{width: fontSize_+'rpx','line-height': fontSize_+'rpx',background: bg,color: bg?'#ffffff':txtColor,'margin-left': '6rpx'}">{{hour}}</text>
				<text class="md">:</text>
				
				<text class="mb" :style="{width: fontSize_+'rpx','line-height': fontSize_+'rpx',background: bg,color: bg?'#ffffff':txtColor,}">{{minute}}</text>
				<text class="md">:</text>
				
				<text class="mb" :style="{width: fontSize_+'rpx','line-height': fontSize_+'rpx',background: bg,color: bg?'#ffffff':txtColor,}">{{second}}</text>
			</template>
			
		</text>
	</text>
	
</template>

<script>
	export default{
		props:{
			fontSize:{
				default: '26',
				type: String
			},
			time:{
				default: '',
				type: Number
			},
			startTxt:{
				default: '',
				type: String
			},
			endTxt:{
				default: '',
				type: String
			},
			txtColor:{
				default: '#333333',
				type: String
			},
			bg:{
				default: '',
				type: String
			}
		},
		computed:{
			fontSize_(){
				return parseInt(this.fontSize)*1.6
			}
		},
		data(){
			return{
				times: this.time,
				over: false,
				day: '',
				hour: '00',
				minute: '00',
				second: '00'
			}
		},
		created() {
			this.count_down_time();
		},
		methods:{
			count_down_time:function(){//倒計時方法
				var that = this,_setInterval=null;
				var time = Number(this.times);
				console.log(time);
				if(time > 0){
					_setInterval = setInterval(()=>{
						if(time > 0){
							time--;
						}else{
							clearInterval(_setInterval);
						}
						that.day = Math.floor(time / 60 / 60 / 24);
						that.hour = Math.floor(time / 60 / 60 % 24)<10?"0"+Math.floor(time / 60 / 60 % 24):Math.floor(time / 60 / 60 % 24);
						that.minute = Math.floor(time / 60 % 60)<10?"0"+Math.floor(time / 60 % 60):Math.floor(time / 60 % 60);
						that.second = Math.floor(time % 60)<10?"0"+Math.floor(time % 60):Math.floor(time % 60);
						time = Number(time);
					}, 1000);
				}else{
					that.over = true
					clearInterval(_setInterval);
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.mt{
		.mdd{
			font-weight: bold;
			font-size: inherit;
		}
		.mb{
			display: inline-block;
			font-size: inherit;
			text-align: center;
			font-weight: bold;
			border-radius: 6rpx;
		}
		.md{
			font-weight: bold;
			padding: 0 4rpx;
		}
	}
</style>